Skip to content

refactor: modernize tech stack#12

Open
kurechon wants to merge 11 commits intoryonakae:mainfrom
kurechon:modernize
Open

refactor: modernize tech stack#12
kurechon wants to merge 11 commits intoryonakae:mainfrom
kurechon:modernize

Conversation

@kurechon
Copy link
Copy Markdown

Summary

  • Webpack 5 → Vite 7.3.1: vite-plugin-singlefile でHTML全インライン化、code.js は IIFE (ES2017) で出力
  • React 17 → 18: createRoot API、不要な React import 削除、PropsWithChildren 対応
  • unstated-next → Zustand 5: granular selectors で再レンダリング最適化、Provider 不要に
  • TypeScript 4.9 → 5.9: target ES2020、moduleResolution bundler
  • ESLint 8 → 10: flat config (eslint.config.js)、@eslint/js recommended 追加
  • Prettier 2 → 3: .prettierrc.js → .prettierrc (JSON) に変換
  • eval() → new Function(): スコープ制御改善、Figma sandbox 非対応時は eval にフォールバック
  • react-hotkeys-hook 3 → 4: enableOnTags → enableOnFormTags
  • Monaco Editor 0.52 → 0.55@figma/plugin-typings 1.109 → 1.123
  • CDN/テーマ fetch エラーハンドリング: res.ok チェック、light テーマへのフォールバック
  • Vite 型定義対応: ?raw import、vite/client reference
  • CLAUDE.md 新規作成: プロジェクト概要、アーキテクチャ、開発手順、制約事項

Test plan

  • pnpm run build ビルド成功確認
  • dist/code.js にスプレッド構文なし(ES2017互換)
  • dist/ui.html に全JS/CSSインライン化
  • Figma Desktop App での実機動作確認

kurechon added 11 commits March 12, 2026 13:55
- React 17 → 18.3.1, react-dom 17 → 18.3.1
- TypeScript 4.9.5 → 5.9.3
- react-hotkeys-hook 3.4.7 → 4.6.2
- @figma/plugin-typings 1.109.0 → 1.123.0
- monaco-editor 0.52.2 → 0.55.1, @emotion/react → 11.14.0
- Add zustand 5.0.11, remove unstated-next
- Remove webpack and related loaders/plugins
- Add vite 7.3.1 and related plugins
- ESLint 8 → 10, Prettier 2 → 3
- Update @types/react and @types/react-dom to v18
- target: ES6 → ES2020
- lib: ES6 → ES2020
- moduleResolution: Node → bundler
- Add skipLibCheck: true
- Remove .eslintrc.js and .prettierrc.js from include
- Replace .eslintrc.js with eslint.config.js (flat config format)
- Use typescript-eslint config helper
- Add @eslint/js recommended rules
- Preserve existing custom rules
Renamed .prettierrc.js to .prettierrc (JSON) for ESM compatibility
with package.json "type": "module". Settings unchanged.
- Replace ReactDOM.render() with createRoot()
- Remove unnecessary React default import
- Replace createContainer() with Zustand create()
- Define StoreState type with all state and actions
- Add try-catch and res.ok check to theme fetch
- Fallback to 'light' theme on fetch error
- Replace Store.useContainer() with useStore() selectors
- Remove Store.Provider wrapper from App.tsx
- Migrate enableOnTags to enableOnFormTags (react-hotkeys-hook v4)
- Use ?raw import for figma.d.ts (Vite ESM compatible)
- Fix monaco-editor import to use public API
- Remove unnecessary React default imports
- Remove unnecessary React default imports
- Add PropsWithChildren for components accepting children
- Fix VStack component name (was incorrectly named HStack)
- Use new Function('figma', code)(figma) instead of eval()
- Add try-catch with figma.notify() for error feedback
- Fallback to eval() if new Function() is not supported in sandbox
- Add /// <reference types="vite/client" /> for ?raw import support
- Remove obsolete .dts module declaration (replaced by Vite client types)
- Project overview and architecture diagram
- Build commands and development workflow
- Figma Plugin constraints (sandbox, postMessage, HTML inlining)
- Coding conventions and debugging guide
@kurechon kurechon closed this Mar 12, 2026
@kurechon kurechon reopened this Mar 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant